<!DOCTYPE html>
<html lang="zn-CH">

<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/favicon.ico"
        type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒优购</title>
    <!-- 引入icon字体 -->
    <link rel="stylesheet" type="text/css" href="../../public/css/icon-font.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="../../public/elementUI/elementUI.css">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../public/js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="../../public/css/bascis.css">
    <link rel="stylesheet" type="text/css" href="../../public/css/animate.min.css">

    <script src="../../public/js/vue-lazyload.js"></script>
    <!-- 引入组件库 -->
    <script src="../../public/elementUI/elementUI.js"></script>
    <script src="../../public/js/axios.min.js"></script>

    <!-- 局部引入 -->
    <link rel="stylesheet" type="text/css" href="./pay.css">


</head>

<body>
    <div id="app">


        <header>
            <div class="center">
                <div class="left">
                    <div class="logo">
                        <img width="140px" v-lazy="logoUrl">
                    </div>
                    <div class="title">支付订单</div>
                </div>
                <div class="right">
                    <el-dropdown>
                        <div class="hd-avatar">
                            <a>{{userInfo.cusNickname}}<i class="iconfont iconjiantouxia"></i></a>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <p @click="getoCar()">购物车</p>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <p @click="gotoPersional()">个人中心</p>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <p @click="logout()">退出</p>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </header>

        <main class="center">
            <div class="order-info" v-if=" undefined!=orderInfo">
                <div class="top">
                    <div class="icon">
                        <i class="el-icon-check"></i>
                    </div>
                    <div class="center">
                        <h1>订单提交成功！去付款咯～</h1>
                        <h2>请在<span>{{orderInfo==undefined?'':"0小时"+(orderInfo.TTL/60).toFixed(1)+"分钟"}}</span>内完成支付,
                            超时后将取消订单</h2>
                        <h3 v-show="!orderDetails">
                            收货信息：{{ orderInfo==undefined?'':orderInfo.addr.addrConsignee+" "+orderInfo.addr.addrTel+" "+orderInfo.addr.addrProvince
                            +" "+orderInfo.addr.addrCity+" "+orderInfo.addr.addrDistrict+" "+orderInfo.addr.addrTowns+" "+orderInfo.addr.addrDetailed
                        }}</h3>
                    </div>
                    <div class="right">
                        <p>应付总额：<span>{{orderInfo==undefined?'':orderInfo.order.total}}</span><em>元</em></p>
                        <p @click="getorderDetailsHeight()">订单详情<i class="iconfont iconjiantouxia"></i></p>
                    </div>
                </div>
                <div class="bottom" :style="{height:orderDetailsHeight+'px'}">
                    <ul ref="orderDetails">
                        <li>
                            <div class="lable">订单号：</div>
                            <div style="color: #ff6700;">{{orderId}}</div>
                        </li>
                        <li>
                            <div class="lable">收货信息：</div>
                            <div>{{ orderInfo==undefined?'':orderInfo.addr.addrConsignee+" "+orderInfo.addr.addrTel+" "+orderInfo.addr.addrProvince
                                +" "+orderInfo.addr.addrCity+" "+orderInfo.addr.addrDistrict+" "+orderInfo.addr.addrTowns+" "+orderInfo.addr.addrDetailed
                            }}</div>
                        </li>

                        <li>
                            <div class="lable">商品信息：</div>
                            <div v-if="orderInfo!=undefined">
                                <ul v-for="(store) in orderInfo.order.stores">
                                    <li v-for="item in store.productList">
                                        <img height="24px" width="24px" :src="item.pIcon" style="margin-right: 5px;">
                                        <span>{{item.pName+"x"+item.pNum}}</span>
                                    </li>
                                </ul>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="pay-type">
                <h1>请选择以下支付方式</h1>
                <div>
                    <a class="alipay"
                        :href="'http://182.92,221.225:8888/common/pay/getPagePay?orderId='+userInfo.cusId+':'+orderId+'&price=232.12'">
                        <img width="174px" height="60px"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9fcf10ba01a57b7d08d38b6f4ff3dfa8.jpg">
                    </a>
                    <a class="wechat-pay" href="#">
                        <img width="174px" height="60px"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66f98cff8649bd5ba722c2e8067c6ca.jpg ">
                    </a>
                </div>
            </div>
        </main>


        <!-- foot -->
        <footer>

            <div class="center">
                <ul>
                    <li><i class="iconfont iconpinzhibaozhang"></i><span>品质保障</span></li>
                    <li><i class="iconfont icontianmaoqitiantuihuo"></i><span>七天无理由退货</span></li>
                    <li><i class="iconfont icontesefuwu"></i><span>特色服务</span></li>
                    <li><i class="iconfont iconweibiaoti-4"></i><span>急速送达</span></li>
                </ul>

            </div>
            <div class="statement">
                <div class="center">
                    <div class="left">
                        <div class="logo ">
                            <a href="../index/index.html">
                                <img width="140px"
                                    src="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/name.png">
                            </a>
                        </div>
                        <p>本网站只用作学习,演示使用,不做其他用途。</p>
                        <p>网站中的商品均为虚拟商品，不做真实出售。请勿付款!</p>
                        <p style="margin-top: 20px;">©Second you buy, powered by 苗文青 2021.</p>
                    </div>
                    <div class="right">
                        <h1>相关链接</h1>
                        <a target="_blank" href="https://www.iconfont.cn/">iconfont</a>
                        <a target="_blank" href="https://element.eleme.cn/#/zh-CN">ElementUI</a>
                        <a target="_blank" href="https://cn.vuejs.org/">Vue</a>
                        <a target="_blank" href="https://shop.vivo.com.cn/">VIVO</a>
                        <a target="_blank" href="https://animate.style/">Animate</a>
                        <a target="_blank" href="https://www.xiaomiyoupin.com/">小米有品</a>
                    </div>
                </div>
            </div>
        </footer>

    </div>
</body>
<script>
    Vue.use(VueLazyload, {
        preLoad: 1.3,
        error: '../../public/img/error.png',
        loading: '../../public/img/loading.png',
        attempt: 1,

    })
    const baseUrl = "http://182.92,221.225:8888"
    var app = new Vue({
        el: '#app',
        data: {

            baseUrl: 'http://182.92,221.225:8888',


            userInfo: {

            },
            logoUrl: 'https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/name.png',
            isLogin: false,
            orderDetails: false, //是否展示订单详细信息
            orderDetailsHeight: 0, //详细订单高度
            orderId: '', //订单id
            orderInfo: undefined

        },
        mounted() {
            this.checkLogin();
            this.getData()
        },

        updated() {

        },
        methods: {

            getData() {
                this.orderId = (window.location.href).split("?")[1].split("=")[1]
                axios.get(baseUrl + "/shop/order/getCurrentUnpay?key=order:" + this.userInfo.cusId + ":" + this
                        .orderId)
                    .then(res => {
                        if (res.data.code == 2000) {
                            this.orderInfo = res.data.data
                        } else {
                            this.$alert('此订单已超时或无效', '失效', {
                                confirmButtonText: '重新选购',
                                callback: action => {
                                    window.location.href = '../index/index.html'
                                }
                            });
                        }


                    })
                    .catch(err => {
                        console.error(err);
                    })
            },
            //检查登录
            checkLogin() {
                const userInfo = sessionStorage.getItem("userInfo")
                if (null === userInfo) {
                    this.isLogin = false
                } else {
                    this.isLogin = true
                    this.userInfo = JSON.parse(userInfo)
                }
            },
            getorderDetailsHeight() {
                if (!this.orderDetails) {
                    this.orderDetailsHeight = this.$refs.orderDetails.offsetHeight
                    this.orderDetails = true
                } else {
                    this.orderDetails = false
                    this.orderDetailsHeight = 0
                }
            },
            //去个人页
            gotoPersional() {
                window.location.href = '../personal/personal.html';
            },
            //退出登录
            logout() {
                sessionStorage.removeItem("userInfo")
                window.location.href = '../index/index.html';
            },
            //去购物车页面
            getoCar() {
                window.open('_blank').location = '../car/car.html'
            },

            //去商品详情页
            toProInfo(pid) {
                var tempwindow = window.open('_blank');
                tempwindow.location = '../product/product.html?' + encodeURI('pid=' + pid);
            }
        },

    })
</script>





</html>